
<template>
  <div class="personInfoEdit box-border min-h-screen bg-hex-F9F9F9">
    <div class="relative">
      <div class="sticky left-0 right-0 top-0 z-999">
        <div class="relative">
          <image class="pointer-events-none absolute left-0 right-0 top-0 w-100%"
                 :src="`${cdnUrl}/imgs/detail/bg.png${imgVersion}`" mode="widthFix" />
          <div class="z-999 flex items-center p-32rpx" :style="{ paddingTop: `${searchBarTop}px` }" @click.stop="goBack">
            <uni-icons type="back" size="28" />
            <text class="text-36rpx font-600">个人信息</text>
          </div>
        </div>
      </div>
      <div class="px-32rpx">
        <div class="mb-32rpx mt-74rpx box-border h-120rpx flex items-center justify-between rounded-32rpx bg-hex-ffffff px-44rpx py-22rpx">
          <div class="text-28rpx text-hex-333333">{{ user.nickname }}</div>
          <div>
            <image
              :src="user.avatar_url"
              mode="widthFix"
              class="h-76rpx w-76rpx rounded-100%"
            />
          </div>
        </div>
        <div class="mb-32rpx box-border rounded-32rpx bg-hex-ffffff p-32rpx">
          <div class="mb-16rpx flex items-center">
            <div class="mr-16rpx h-22rpx w-4rpx rounded-14rpx bg-hex-ABCD03" />
            <div class="text-28rpx text-hex-333333">手机号</div>
          </div>
          <input v-model="infoData.mobile" type="number" placeholder="请输入" class="text-28rpx text-hex-C3C3C3 placeholder-hex-C3C3C3">
        </div>
        <div class="mb-450rpx box-border rounded-32rpx bg-hex-ffffff p-32rpx">
          <div class="mb-16rpx flex items-center">
            <div class="mr-16rpx h-22rpx w-4rpx rounded-14rpx bg-hex-ABCD03" />
            <div class="text-28rpx text-hex-333333">简介</div>
          </div>
          <textarea
            v-model="infoData.remark"
            placeholder="请简单介绍一下你自己"
            placeholder-style="color:#C4C4C4"
            auto-height="true"
            class="min-h-250rpx w-full text-28rpx"
          />
        </div>
        <div class="rounded-148rpx bg-hex-ABCD03 text-center text-32rpx leading-72rpx text-hex-ffffff" @click="editInfo">确认</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'

const { user, useGetInfoData, getInfo } = useUserStore()
const goBack = () => {
  uni.navigateBack({
    delta: 1,
  })
}
const infoData = $ref({
  mobile: user.mobile,
  remark: user.remark,
})
let searchBarTop: any = $ref('24')
const editInfo = async () => {
  const { data, status, error } = await Fetch('/api/s/t/user', {
    method: 'patch',
    data: {
      id: user.id,
      ...infoData,
    },
  })
  if (status === 200 && data.code === 0) {
    uni.showToast({
      title: '保存成功',
      icon: 'none',
      duration: 2000,
    })
    useGetInfoData()
    getInfo(user.id)
  }
}
onLoad(() => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  // #endif
})
</script>
